<template>
    <div ref="echartsWrapper" class="echartsWrapper" :style="{width,height}"></div>
</template>
<script>
import echarts from 'echarts';
export default {
    props:{
        option:{
            type:Object,
            default:() => ({})
        },
        width:{
            type:String,
            default:'400px'
        },
        height:{
            type:String,
            default:'300px'
        }
    },
   mounted(){
       this.myChart = echarts.init(this.$refs.echartsWrapper);
       this.myChart.setOption(this.option);
   },
   data(){
       return {
           myChart:null
       }
   },
   watch:{
       option:{
           handler:function (val) {  //属性改变时触发的回调函数
               this.myChart.setOption(val);
           },
           deep:true  //不管监听的属性嵌套多深，只要有改变都会监听到
       }
   },
   methods:{
       changeData(){
           console.log()
       }
   }
}
</script>

<style lang="scss" scoped>
    .echartsWrapper{
        border:1px solid gray;
        display: inline-block;
    }
</style>
